// 主题色
$primary-color: #4fc08d;
$primary-light: #e8f5ee;
$danger-color: #ff6b6b;
$warning-color: #ffc107;
$success-color: #4fc08d;
$info-color: #909399;

// 文字颜色
$text-primary: #333333;
$text-regular: #666666;
$text-secondary: #909399;
$text-white: #ffffff;

// 背景颜色
$bg-color: #f7f8fa;
$bg-white: #ffffff;

// 边框颜色
$border-color: #ebedf0;

// 字体大小
$font-size-large: 20px;
$font-size-medium: 18px;
$font-size-normal: 16px;
$font-size-small: 14px;

// 间距
$spacing-large: 24px;
$spacing-medium: 16px;
$spacing-small: 12px;
$spacing-mini: 8px;

// 圆角
$border-radius-large: 12px;
$border-radius-medium: 8px;
$border-radius-small: 4px;

// 阴影
$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

// 老年人友好设计
$large-touch-height: 50px;  // 较大的可点击区域
$large-icon-size: 32px;     // 较大的图标尺寸

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin card-style {
  background: $bg-white;
  border-radius: $border-radius-large;
  box-shadow: $box-shadow;
  padding: $spacing-medium;
}

@mixin large-text {
  font-size: $font-size-large;
  font-weight: bold;
  color: $text-primary;
}

@mixin clickable-item {
  min-height: $large-touch-height;
  padding: $spacing-medium;
  @include flex-between;
  background: $bg-white;
  
  &:active {
    background-color: $primary-light;
  }
}

// 老年人友好的列表项样式
@mixin elderly-friendly-list-item {
  @include clickable-item;
  font-size: $font-size-normal;
  line-height: 1.6;
  
  .item-title {
    font-weight: bold;
    color: $text-primary;
  }
  
  .item-desc {
    color: $text-regular;
    margin-top: $spacing-mini;
  }
}

// 导航栏样式
@mixin nav-bar {
  background: $primary-color;
  color: $text-white;
  height: 56px;
  font-size: $font-size-medium;
  font-weight: bold;
}

// 按钮样式
@mixin primary-button {
  background: $primary-color;
  color: $text-white;
  font-size: $font-size-normal;
  height: $large-touch-height;
  border-radius: $border-radius-medium;
  font-weight: bold;
  
  &:active {
    opacity: 0.9;
  }
}

// 标题样式
@mixin section-title {
  font-size: $font-size-medium;
  font-weight: bold;
  color: $text-primary;
  margin-bottom: $spacing-medium;
  padding-left: $spacing-small;
} 